<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="c" width="500" height="400"></canvas>
</body>
<!-- varying限定符说明 
varying 存储的是顶点着色器的输出，同时作为片段着色器的输入，通常顶点着色器都会把需要传递给片段着色器的数据存储在一个或多个 varying 变量中。
这些变量在片段着色器中需要有相对应的声明且数据类型一致，然后在光栅化过程中进行插值计算
顶点着色器和片段着色器中都会有 varying 变量的声明 -->
<script id = "vertex-shader" type="notjs">
    attribute vec4 a_position;
    attribute vec4 a_color;
    varying vec4 v_color;
    
    void main() {
        v_color = a_color;
        gl_Position = a_position;
    }
</script>
<script id = "fragment-shader" type="notjs">
    precision mediump float;
    varying vec4 v_color;

    void main() {
        gl_FragColor = v_color;
    }
</script>
<script src="./changeColor.js"></script>
</html>